<!doctype html>
<!--
  @license
  Copyright 2021 Google LLC
  SPDX-License-Identifier: BSD-3-Clause
-->
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"
    />
    <title>List Animation</title>
  </head>
  <body>
    <style>
      html,
      body {
        margin: 0;
        font-family: sans-serif;
        height: 100vh;
        width: 100vw;
      }

      my-element {
        flex: 1;
      }
    </style>
    <my-element></my-element>
    <script type="module">
      import {LitElement, html, css} from 'lit';
      import {repeat} from 'lit/directives/repeat.js';
      import {animate, fadeIn, flyBelow} from '../development/animate.js';

      const shuffle = (a) => {
        a = a.slice();
        let j, x, i;
        for (i = a.length - 1; i > 0; i--) {
          j = Math.floor(Math.random() * (i + 1));
          x = a[i];
          a[i] = a[j];
          a[j] = x;
        }
        return a;
      };

      const data = [
        {value: 'One'},
        {value: 'Two'},
        {value: 'Three'},
        {value: 'Four'},
        {value: 'Five'},
        {value: 'Six'},
        {value: 'Seven'},
        {value: 'Eight'},
      ];

      class MyElement extends LitElement {
        static styles = [
          css`
            :host {
              display: flex;
              height: 100%;
              width: 100%;
              align-items: center;
              justify-content: center;
              position: relative;
              overflow: hidden;
              color: #040424;
            }

            ul {
              list-style: none;
              padding: 0;
              margin: 0;
              display: flex;
              flex-direction: column;
            }

            .row {
              flex-direction: row;
            }

            li {
              text-align: center;
              flex: 1;
              background: #ef5350;
              padding: 16px;
              border: 4px solid #b61827;
              border-radius: 8px;
              margin: 8px;
              min-width: 100px;
            }
          `,
        ];

        static properties = {
          data: {},
          row: {},
          count: {},
          shouldAnimate: {},
        };

        constructor() {
          super();
          this.addEventListener('click', (e) => this.onClick(e));
          this.row = false;
          this.count = 0;
          this.data = data;
          this.shouldAnimate = true;
        }

        render() {
          const keyframeOptions = {
            duration: 500,
            easing: 'ease-in-out',
            fill: 'both',
          };
          const d = keyframeOptions.duration / this.data.length;
          return html`
            <ul class="tabs ${this.row ? 'row' : ''}">
              ${repeat(
                this.data,
                (i) => i,
                (i, x) =>
                  html`<li
                    ${animate({
                      in: fadeIn,
                      out: flyBelow,
                      onComplete:
                        x === this.data.length - 1
                          ? () => this.advance()
                          : undefined,
                      keyframeOptions: {...keyframeOptions, delay: x * d},
                    })}
                  >
                    ${i.value}
                  </li>`
              )}
            </ul>
          `;
        }

        advance() {
          if (this.shouldAnimate) {
            this.count++;
            const out = this.count % 5 === 0;
            if (out) {
              this.data = [];
            } else {
              this.row = !this.row;
              this.data = shuffle(data);
            }
          }
        }

        onClick(e) {
          this.shouldAnimate = !this.shouldAnimate;
          this.advance();
        }
      }

      customElements.define('my-element', MyElement);
    </script>
  </body>
</html>
